<script lang="ts" setup>
import TitleImg from './TitleImg.vue'
import type { IOrder } from '@/typings/interface'

const { order } = defineProps<{
  order: IOrder
}>()

// 不同订单状态列表tab title
const orderState = computed(() => {
  switch (order.order_state) {
    case 'CANCEL':
      return '已取消'
    case 'NEW':
      return '待付款'
    case 'PAY':
      return '已完成'
  }
})

// 支付按钮
async function confirm() {
  if (order.order_state === 'NEW') {
    /**
     * 去支付
     */
    console.log('去支付');
  }
}
</script>

<template>
  <view bg-white p="3.75">
    <view between p="b-3.75" class="b-b b-#d7d7d7">
      <text text="18 #555555">
        订单号：{{ order.out_trade_no }}
      </text>
      <text text="20 #f38e48">
        {{ orderState }}
      </text>
    </view>
    <TitleImg :order="order" />
    <view between mt-5>
      <view flex items-center v-show="order.order_state === 'PAY'">
        <text text="24 #7f7f7f">
          实付:&nbsp;
        </text>
        <text text="28 #ff4439" font-bold>
          ¥{{ order.pay_amount }}
        </text>
      </view>
      <button v-if="order.order_state === 'NEW'" p="y-0 x4" m-0 text-20 leading-6 rounded-4 bg-red-5 text-white
        @click="confirm">
        立即支付
      </button>
    </view>
  </view>
</template>
